<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    <meta http-equiv="expires" content="0">
    <title>Share</title>
    <link rel="stylesheet" href="../../static/css/bootstrap.min.css" th:href="@{/static/css/bootstrap.min.css}">
    <link rel="stylesheet" href="../../static/css/fileinput.css" th:href="@{/static/css/fileinput.css}">
    <style>


    </style>
</head>
<body>
    <nav class="navbar navbar-light bg-light navbar-expand">
        <a href="/" class="navbar-brand">Shop</a>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="/" class="nav-link active">首页</a>
                </li>
            </ul>
        </div>

        <div th:if="${#strings.isEmpty(session.user)}">
            <div class="btn-group">
                <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">登录</button>
                <div class="dropdown-menu dropdown-menu-right p-2 text-muted"  style="width: 300px">
                    <form action="/userLogin" data-stopPropagation="true" method="post">
                        <div class="form-group">
                            <input type="hidden" id="path" name="path" value="/">
                        </div>
                        <div class="form-group" data-stop>
                            <label>用户名:</label>
                            <input id="username" name="username" type="text" class="form-control" placeholder="username">
                            <div id="noUsername" class="alert alert-danger alert-dismissible fade show" style="display:none">
                                <strong>用户名不能为空</strong>
                                <button id="noUserBtn" type="button" class="close" >&times;</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>密码:</label>
                            <input id="password" name="password" type="password" class="form-control" placeholder="password">
                            <div id="noPassword" class="alert alert-danger alert-dismissible fade show" style="display:none">
                                <strong>请输入密码</strong>
                                <button id="noPwdBtn" type="button" class="close" >&times;</button>
                            </div>
                        </div>
                        <div class="form-group" style="margin-top: 2px">
                            <button id="loginSubmit" type="submit" class="btn btn-primary" style="width: 100%;">登录</button>
                            <span id="err" th:if="${not #strings.isEmpty(loginMsg)}">
                                        <div class="alert alert-danger alert-dismissible fade show">
                                            <strong th:text="${loginMsg}"></strong>
                                            <button type="button" class="close" data-dismiss="alert">&times;</button>
                                        </div>
                                    </span>
                        </div>
                        <div class="text-center">
                            <a href="/enroll">>前往注册</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div id="user" th:if="${session.user}">
            <img th:onclick="'javascript:locate(\''+'/user/'+${session.user.id}+'\')'"
                 style="height: 45px;width: 45px;margin-right: 20px"
                 class="rounded-circle dropdown-toggle" data-toggle="dropdown"
                 th:src="${session.user.iconURL!=null}?${session.iconPathPattern}+${session.user.iconURL}:@{/static/img/default.png}">
            <ul class="dropdown-menu dropdown-menu-right p-2 text-muted" role="menu" style="width: 100px">
                <a class="dropdown-item" href="/show/order/list">我的订单</a>
                <a class="dropdown-item"  href="/show/order/cart">我的购物车</a>
                <a th:if="${session.user.state==1}" class="dropdown-item"  href="/dashboard">管理</a>
                <a class="dropdown-item"  href="/logOut">登出</a>
            </ul>
            <span style="padding-right: 40px" th:text="${session.user.getUsername()}"></span>
        </div>
    </nav>

    <div class="container" style="padding-top: 100px">
        <div id="content" class="row">
            <div class="col-5">
                <div class="carousel slide" data-ride="carousel" data-interval="5000" id="myCarousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img style="height:300px;object-fit: cover;overflow: hidden;" th:src="${goodsPicPath}+${goods.pictures.get(0).getPicURl()}" class="d-block w-100">
                        </div>
                        <div class="carousel-item" th:each="a:${goods.pictures}">
                            <img  style="height:300px;object-fit: cover;overflow: hidden;" th:src="${goodsPicPath}+${a.getPicURl()}" class="d-block w-100">
                        </div>
                    </div>
                    <a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
                        <span class="carousel-control-prev-icon" style="background-color: #117a8b"></span>
                    </a>
                    <a class="carousel-control-next" href="#myCarousel" data-slide="next">
                        <span class="carousel-control-next-icon" style="background-color: #117a8b"></span>
                    </a>
                </div>

            </div>


            <div class="col-7">
                <h2 th:text="${goods.name}"></h2>
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-8">
                            <form id="Form" action="" method="post" class="form-inline" role="form">
                                <input type="hidden" name="gid" th:value="${goods.id}">
                                <span class="form-group" style="width: 100%">
                                    <label style="margin-right: 10%">数量:</label>
                                    <input readonly="readonly" style="width: 80%;text-align: center" id="goodsNum" name="goodsNum" type="text" class="form-control" value="1">
                                </span>
                            </form>
                        </div>
                        <div class="col-4">
                            <button id="minus" style="width: 20%" class="btn btn-primary">-</button>
                            <button id="plus" style="width: 20%" class="btn btn-primary">+</button>
                        </div>
                    </div>
                </div>

                <br>
                <h3>售价</h3>
                <h3 style="margin-left: 10px" th:text="${goods.selling_price}" ></h3>

                <br>
                <br>

                <button onclick="buy()" type="button" class="btn btn-warning">立即购买</button>
                <button onclick="addCart()" type="button" class="btn btn-danger">加入购物车</button>
                <strong style="margin-left: 20px;color: red" th:if="${msg}" th:text="${msg}"></strong>
            </div>

            <br>
            <br>
            <!-- 显示商品信息 -->
            <h3>商品信息</h3>

            <table class="table table-hover">
                <caption>商品信息</caption>
                <thead>
                <tr>
                    <th>商品ID</th>
                    <th>商品名</th>
                    <th>售价</th>
                    <th>产地</th>
                    <th>时间</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td th:text="${goods.id}"></td>
                    <td th:text="${goods.name}"></td>
                    <td th:text="${goods.selling_price}"></td>
                    <td th:text="${goods.place}"></td>
                    <td th:text="${goods.times}"></td>
                </tr>
                </tbody>
            </table>

        </div>
    </div>

    <script type="text/javascript" src="../../static/js/jquery-3.3.1.js" th:src="@{../../static/js/jquery-3.3.1.js}"></script>
    <script type="text/javascript" src="../../static/js/bootstrap.bundle.min.js" th:src="@{../../static/js/bootstrap.bundle.min.js}"></script>
    <script type="text/javascript" src="../../static/js/piexif.js" th:src="@{../../static/js/piexif.js}"></script>
    <script type="text/javascript" src="../../static/js/fileinput.js" th:src="@{../../static/js/fileinput.js}"></script>
    <script type="text/javascript" src="../../static/js/zh.js" th:src="@{../../static/js/zh.js}"></script>
    <script type="text/javascript">
        $(function () {
            if(document.getElementById("noUsername"))
            {
                document.getElementById("noUsername").style.display="none";
            }
            if(document.getElementById("noPassword"))
            {
                document.getElementById("noPassword").style.display="none";
            }
            $(".dropdown-toggle").on("mouseover", function() {
                $(this).dropdown('toggle');
            })
        })

        $('#loginSubmit').click(function ()
        {
            var name=$.trim($('#username').val());
            var password=$.trim($('#password').val());
            if(name==""||name==null)
            {
                document.getElementById("noUsername").style.display="block"
                return false;
            }
            else if(password==""||password==null)
            {
                document.getElementById("noPassword").style.display="block"
                return false;
            }
            else
            {
                var path=window.location.pathname;
                $('#path').val(path);
                $('#loginForm').submit;
                return true;
            }
        })
        $('#noUserBtn').click(function ()
        {
            if(document.getElementById("noUsername"))
            {
                document.getElementById("noUsername").style.display="none";
            }
        })

        $('#noPwdBtn').click(function ()
        {
            if(document.getElementById("noPassword"))
            {
                document.getElementById("noPassword").style.display="none";
            }
        })

        $('#username').click(function ()
        {
            if(document.getElementById("noUsername"))
            {
                document.getElementById("noUsername").style.display="none";
            }
            if(document.getElementById("err"))
            {
                document.getElementById("err").style.display="none";
            }
        })

        $('#password').click(function ()
        {
            if(document.getElementById("noPassword"))
            {
                document.getElementById("noPassword").style.display="none";
            }
            if(document.getElementById("err"))
            {
                document.getElementById("err").style.display="none";
            }
        })
        $("body").on('click','[data-stopPropagation]',function (e) {
            e.stopPropagation();
        });

        $('#plus').click(function () {
            var n=parseInt($('#goodsNum').val());
            console.log(n);
            if(n>=0)
            {
                $('#goodsNum').val(n+1);
            }
        })
        $('#minus').click(function () {
            var n=parseInt($('#goodsNum').val());
            console.log(n);
            if(n>1)
            {
                $('#goodsNum').val(n-1);
            }
        })

        function addCart(){
            $("#Form").attr("action",'/addCart').submit();
        }

        function buy(){
            $("#Form").attr("action",'/buy').submit();
        }

        function locate(string)
        {
            window.open(string);
        }
    </script>
</body>
</html>